/**
 * Created by zzc on 2017/11/23
 */


'use strict'

import React, {Component} from 'react';

import {
    View,
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity,
    Image
} from 'react-native';

import {deviceWidth} from "../../../base/util/ScreenUtil";

let cols = 6;

export default class HouseDetailConfig extends Component {

    constructor(props) {
        super(props)
        this.state = {
            response: "",
            expanded:false,
            expandText:"查看全部"
        }
    }

    componentWillReceiveProps = (nextProps) => {
        this.setState({
            response: nextProps.item
        });
    }

    render() {
        return (
            <View style={styles.contain}>
                <Text style={{color:"black",fontSize:13}}>基本信息</Text>
                <View style={{backgroundColor: "#F7F8FA", marginTop: 5, height: 1}}></View>

                <View style={styles.container}>
                    {this._renderConfig()}
                </View>

                <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
                    <Text
                        style={{fontSize:14,
                            padding:5,
                            color:'#FF3366',}}
                        onPress={this._onPressExpand.bind(this)}>
                        {this.state.expandText}</Text>

                    <Image source={this.state.expanded?require("../../../resource/images/icon_pop_up_red.png"):require("../../../resource/images/icon_pop_down_red.png")}
                           style={{width:10,height:6,marginLeft:3,resizeMode:"cover"}}/>
                </View>

            </View>
        );
    }

    _renderConfig(){
        const info = this.state.response
        let dataArray = info.equipments;
        let  allData = [];
        if(dataArray!=null){
            for(let i=0;i<(this.state.expanded?dataArray.length:cols);i++) {
                if (i < dataArray.length) {
                    let badge = dataArray[i];
                    allData.push(
                        <View key={i} style={styles.outViewS}>
                            <Image source={{uri: badge.url}} style={{width: 15, height: 20, resizeMode: "contain"}}/>
                            <Text style={styles.titleName} numberOfLines={1}>{badge.name}</Text>
                        </View>
                    )
                }
            }

            return allData
        }else{
            return null;
        }
    }

    _onPressExpand(){
        if(!this.state.expanded){
            this.setState({expandText:"点击收起",expanded:true})
        }else{
            this.setState({expandText:"查看全部",expanded:false})
        }
    }
}

const styles = StyleSheet.create({
    contain: {
        backgroundColor: 'white',
        flexDirection: "column",
        paddingTop: 10,
        paddingLeft: 10,
        paddingBottom: 10,
        marginTop:10
    },
    container: {
        flexDirection: 'row', //设置主轴方向
        flexWrap: 'wrap', //超出换行
        backgroundColor: 'white',
        width: deviceWidth,  //宽度等于屏幕宽度
        justifyContent:"flex-start",
        paddingRight:10,
        marginTop:10
    },
    outViewS: {
        alignItems: 'center',   //交叉轴的对齐方式
        width: (deviceWidth-20)/cols,
    },
    imageStyle: {
        width: 30,
        height: 30
    },
    titleName: {
        color:'black',
        fontSize:13,
        marginTop:3
    }
});